<style scoped>
    .printSF{ margin:0px !important; padding:0px !important; font-family:"黑体", Arial !important; font-size:11px !important; line-height: 1 !important;color: black !important; }
    img {border:0px;}
    .wrapper{ width:455px; height:97%;  margin:0px auto; padding:0px; overflow:hidden; border:3px solid #000; }
    .top{ float:left; }
    .logo{float:left;  width:100px; height:50px; border-bottom:1px solid #000;  text-align:center; }
    .right{float:right;  width:455px; height:65px; border-bottom:1px solid #000;text-align:center;  }
    .con1{}
    .con_left{float:left; width:334px; padding:3px 5px; height:76px; border-bottom:1px solid #000; border-right:1px solid #000;}
    .con_right{float:right; width:115px;height:76px;border-bottom:1px solid #000;}
    .con_right_top{height:22px;padding:1px 5px;border-bottom:1px solid #000;}
    .con_right_bom{height:53px;padding:0px 5px;}

    .con1_left{float:left; width:28px; padding:11px 5px; height:65px; border-bottom:1px solid #000; border-right:1px solid #000;}
    .con1_right{float:right; width:421px;padding:3px 5px; height:65px;border-bottom:1px solid #000;font-size: 16px;}

    .con2_left{float:left; width:28px; padding:3px 5px; height:40px; border-bottom:1px solid #000; border-right:1px solid #000;}
    .con2_center{float:left; width:305px;padding:3px 5px; height:40px;border-bottom:1px solid #000;font-size: 12px;}
    .con2_right{float:right; width:116px; padding:3px 5px; height:40px; border-bottom:1px solid #000; border-left:1px solid #000;}

    .con_left1{float:left; width:334px; padding:0px; height:100px; border-bottom:3px solid #000; border-right:1px solid #000;}
    .con_right1{float:right; width:115px;padding:3px 5px; height:100px;border-bottom:3px solid #000;}
    .con_left1_top{width:331px;padding:3px 5px; height:48px;border-bottom:1px solid #000;}
    .con2_left1_bom{height:50px;}
    .con2_left1_bom_left{float:left; width:28px;height:49px;padding: 3px 5px;border-right:1px solid #000;}
    .con2_left1_bom_center{float:left; width:114px;height:49px;padding:5px 1px;border-right:1px solid #000;}
    .con2_left1_bom_right{float:right; width:190px;height:49px;padding:5px 1px;}

    .con3_left{float:left; width:119px; padding:3px 5px; height:52px; border-bottom:1px solid #000; border-right:1px solid #000;}
    .con3_right{float:right; width:330px;padding:3px 5px; height:52px;border-bottom:1px solid #000;}

    .li1{float:left; width:67px; height:20px; line-height:20px; text-align:center;border-bottom:1px solid #000; border-right:1px solid #000;}
    .li2{float:left; width:68px; height:20px; line-height:20px; text-align:center;border-bottom:1px solid #000;}

    .con_left2{float:left; width:160px; padding:3px 5px; height:60px; border-bottom:1px solid #000; border-right:1px solid #000;}
    .con_right2{float:right; width:189px; height:40px;border-bottom:1px solid #000;}
    .li3{float:left; width:90px; height:34px;padding:3px 5px;  border-right:1px solid #000;}
    .li4{float:right; width:53px; height:34px;padding:3px 5px;  }
    .feight{width:63px;height:15px;border:0;}
    .con_right3{float:right; width:179px;padding:0px 5px;height:25px; line-height:25px; border-bottom:1px solid #000; background-color:#FFFFFF}

    .con_left3{float:left; width:350px; padding:3px 5px; height:73.5px;}
    .con_right4{float:right; width:179px;padding:0px 5px;height:25px; line-height:25px; border-bottom:1px solid #000;}

    .con_left5{float:left; width:140px; height:18px; padding:0px 5px; line-height:18px; border-top:2px solid #000; border-bottom:1px solid #000; border-right:1px solid #000;}
    .con_right5{float:right; width:179px; height:18px; padding:0px 5px; line-height:18px; border-top:2px solid #000; border-bottom:1px solid #000;}

    .con_right6{float:right; width:109px;padding:3px 5px; height:15px;border-bottom:1px solid #000;}
    .con_left7{float:left; width:210px; padding:3px 5px; height:51px; border-bottom:1px solid #000; border-right:1px solid #000;}
</style>

<template>
    <div class="printSF">
        <div align="center" class="noprint">
        <Button @click="print">打印</Button>
        </div>
        <div class="wrapper" id="sf">
            <div class="top">
                <div class="right">
                    <span style="font-size:84px;line-height: 66px;font-weight: bolder;font-family:黑体">E</span>
                </div>
            </div>
            <div class="con1">
                <div class="con_left"><div id="barcodeTarget" style="margin-top: 10px;margin-left: 40px;"></div></div>
                <div class="con_right">
                    <div class="con_right_top">
                        <span style="font-size:22px;font-weight: bold;margin-left: 2px;">{{logistics.producttype == "1" ? "顺丰次日" : logistics.producttype == "2" ? "顺丰隔日" : logistics.producttype == "5" ? "顺丰次晨" : "签单返还"}}</span>
                    </div>
                    <div class="con_right_bom">
                    </div>
                </div>
            </div>

            <div class="con1">
                <div class="con1_left"><span><strong>目的地</strong></span></div>
                <div class="con1_right"><span id="acceptcode" style="font-size: 70px;line-height: 59px;font-weight: bold;font-family:Arial">{{logistics.citycode}}</span> </div>
            </div>
            <div class="con1">
                <div class="con1_left"><span><strong>收件人</strong></span></div>
                <div class="con1_right" style="font-weight: bold;">
                    <span id="acceptcontact">{{logistics.contact}}</span>&nbsp; <span id="acceptphone">{{logistics.mobilephone}}</span><br />
                    <span id="acceptaddress">{{logistics.province}}{{logistics.city}}{{logistics.address}}</span>
                </div>
            </div>
            <div class="con1">
                <div class="con2_left"><span><strong>寄件人</strong></span></div>
                <div class="con2_center">
                    <span id="sendcontact">{{logistics.storage.contact}}</span>&nbsp;<span id="sendphone">{{logistics.storage.tel}}</span><br />
                    <span id="sendaddress">{{logistics.storage.province}}{{logistics.storage.city}}{{logistics.storage.address}}</span>
                </div>
                <div class="con2_right">
                    <span style="font-size: 16px;padding-left: 12px; font-weight: bold;" id="waybilltype">
                        寄件日期
                    </span><br/>
                    <span style="font-size: 16px;padding-left: 10px;">{{new Date().format("yyyy-MM-dd")}}</span>
                </div>
            </div>
            <div class="con1">
                <div class="con_left1">
                    <div class="con_left1_top">
                        <span><strong> 付款方式:</strong>{{logistics.paytype == "1" ? "寄货方付" : logistics.paytype == "2" ? "收货方付" : logistics.paytype == "3" ? "第三方付" : ""}}</span>
                        <span><strong> 实际重量:</strong>{{logistics.weight}}KG</span>
                        <span><strong> 费用:</strong>{{logistics.price}}</span><br/>
                        <span><strong> 月结账号:</strong>{{logistics.storage.cardno}}</span><br/>
                        <span style="line-height: 29px;"><strong> 件数:</strong>{{logistics.count}}</span><span style="font-size: 14px;font-weight: bold;padding-left: 180px;">转寄协议客户</span>
                    </div>
                    <div class="con2_left1_bom">
                        <div class="con2_left1_bom_left">
                            <strong>托寄物</strong>
                        </div>
                        <div class="con2_left1_bom_center">
                            <span id="cargo" style="margin-left: 5px;">服装</span>
                        </div>
                        <div class="con2_left1_bom_right">
                            <strong>收件员:</strong><span><span style="font-family:Arial"></span></span><br />
                            <strong>寄件日期:</strong><span></span><br />
                            <strong>派件员:</strong><span></span><br />
                        </div>
                    </div>
                </div>
                <div class="con_right1">
                    <div style="height:78px;">
                        <strong>签名:</strong><br/>
                    </div>
                    <div style="float:right;">
                        <span>&nbsp;&nbsp;&nbsp;月&nbsp;&nbsp;日</span>
                    </div>
                </div>
            </div>
            <div class="con1">
                <div class="con3_left"><img src="../../images/print/SFlogo.jpg" style="width:85%;height:50%;"></img><img src="../../images/print/tel.jpg" style="width:85%;height:50%;"></img></div>
                <div class="con3_right"><div id="barcodeTarget1" style="margin-top: 4px;margin-left: 30px;"></div></div>
            </div>
            <div class="con1">
                <div class="con1_left"><span><strong>寄件人</strong></span></div>
                <div class="con1_right"> <span id="acceptcontact">{{logistics.storage.contact}}</span>&nbsp; <span id="acceptphone">{{logistics.storage.tel}}</span><br/><span id="acceptaddress">{{logistics.storage.province}}{{logistics.storage.city}}{{logistics.storage.address}}</span></div>
            </div>
            <div class="con1">
                <div class="con1_left"><span><strong>收件人</strong></span></div>
                <div class="con1_right"> <span id="acceptcontact">{{logistics.contact}}</span>&nbsp; <span id="acceptphone">{{logistics.tel}}</span><br/><span id="acceptaddress">{{logistics.province}}{{logistics.city}}{{logistics.address}}</span></div>
            </div>
            <div class="con1">
                <div class="con_left3">
                    <strong> 托寄物信息:</strong><span id="cargo">服装</span><br />
                    <strong>备注栏:</strong><span id="remarkvalue">{{logistics.remark}}</span>
                </div>
            </div>
        </div>


    </div>
</template>

<script>
    export default {
        data() {
            return {
                logistics:{},
                waybillno:"",
                cardNo:"",
                date:'',
                barcode:""
            }
        },
        created: function () {
            $(".console-body").css({top:0});
            this.date = new Date().format("yyyy-MM-dd");
            axios.get('shipping/'+this.$route.params.shippingId+'/print').then(res => {
                this.logistics = res.data;
                if(res.data.receipt !="" ){
                    this.waybillno =  "签单返还："+res.data.waybillno;
                }
                this.barcode = res.data.waybillno;
                if(res.data.cardno != null&&"1".equals(res.data.paytype)){
                     this.cardNo = res.data.cardno;
                }else if(res.data.payerAccountNumber != null&&res.data.payerAccountNumber !=""&&!"1".equals(res.data.paytype)){
                     this.cardNo = res.data.payerAccountNumber;
                }
             }).catch(err =>{
             })
        },

        mounted() {
            window.onresize = function(){
                $("#contcentHeight").css({height:(window.innerHeight - 174)+"px"});
                $("#rightWidth").css({width:(window.innerWidth - 180)+"px"});
            };
        },

        updated:function () {
            $("#barcodeTarget").barcode(this.barcode, "code128", {
                barWidth :2,
                barHeight : 38,
                fontSize :23
            });

            $("#barcodeTarget1").barcode(this.barcode, "code128", {
                barWidth :2,
                barHeight : 30,
                fontSize :14
            });
        },
        methods: {
            print(){
                $("div.noprint").hide();
                window.print();
                $("div.noprint").show();
            },
        }

    }
</script>
